<template>
    <!-- 地图点信息 -->
    <div class="allMarker">
        <AllinMarker :select-arr="selectArr" :select-menu-arr="selectMenu"></AllinMarker>
    </div>
</template>

<script>
    import AllinMarker from "../../../components/allinMarker/AllinMarker";
    import {
        airTime, PM, airWeek, airSeven, soilTime, soilSeven, waterTime, waterSeven, anionTime, rainData
    } from '../../../axios/ecology/index'

    import moment from 'moment'


    export default {
        name: "allMarker",
        components: {
            AllinMarker
        },
        data() {
            return {
                selectMenu: [
                    {
                        id: '1-1',
                        name: '全部点位'
                    },
                    {
                        id: 1,
                        name: '负离子传感器',
                        imgUrl: require('../../../assets/ecology/icon-a.png')
                    }, {
                        id: 2,
                        name: '水质传感器',
                        imgUrl: require('../../../assets/ecology/icon-c.png')
                    }, {
                        id: 3,
                        name: '土壤传感器',
                        imgUrl: require('../../../assets/ecology/icon-d.png')
                    }, {
                        id: 4,
                        name: '空气传感器',
                        imgUrl: require('../../../assets/ecology/icon-b.png')
                    }, {
                        id: 5,
                        name: '雨量传感器',
                        imgUrl: require('../../../assets/ecology/icon-e.png')
                    }
                ],
                selectArr: [
                    {
                        id: 1,
                        name: '负离子传感器',
                        imgUrl: require('../../../assets/ecology/icon-a.png')
                    }, {
                        id: 2,
                        name: '水质传感器',
                        imgUrl: require('../../../assets/ecology/icon-c.png')
                    }, {
                        id: 3,
                        name: '土壤传感器',
                        imgUrl: require('../../../assets/ecology/icon-d.png')
                    }, {
                        id: 4,
                        name: '空气传感器',
                        imgUrl: require('../../../assets/ecology/icon-b.png')
                    }, {
                        id: 5,
                        name: '雨量传感器',
                        imgUrl: require('../../../assets/ecology/icon-e.png')
                    }
                ],
                map: null,// 地图实例对象
                markerArrList: [],// 点位数组
                markerDataArr: null,//全部数据
                air: [],//空气传感器
                soil: [],//土壤传感器 // 智能屏幕点位
                water: [], // 水质传感器
                anion: [], // 负离子传感器
                rainfall: [], // 雨量传感器
                airSevenArr: [],//空气
                soilSevenArr: [],// 土壤
                waterSevenArr: [], // 水质
                anionSevenArr: [],//负离子
                rainSevenArr: [],//雨量数据
                infoWindowOpen: null
            }
        },
        mounted() {

            console.log('智能生态点位', this.map)
        },
        methods: {
            /**
             * 默认设置所有的点位
             */
            setAllMarker(params, map) {
                this.map = map
                console.log('默认设置所有点位')
                this.markerDataArr = params
                console.log(this.markerDataArr)
                let markerArr = []
                this.markerDataArr.forEach(item => {
                    item.forEach(items => {
                        console.log(items.name)
                        if (items.names === "雨量传感器") {
                            // items.imgurl = this.selectArr[4].imgUrl
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/ecology/yl-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/ecology/yl-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/ecology/yl-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/ecology/yl-Offline.png')
                            }
                            this.rainfall = item// 雨量传感器
                        } else if (items.names === "空气传感器") {
                            // items.imgurl = this.selectArr[4].imgUrl
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/ecology/kq-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/ecology/kq-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/ecology/kq-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/ecology/kq-Offline.png')
                            }
                            this.air = item//空气传感器
                        } else if (items.names === "土壤传感器") {
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/ecology/tr-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/ecology/tr-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/ecology/tr-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/ecology/tr-Offline.png')
                            }
                            this.soil = item//土壤传感器 // 智能屏幕点位
                        } else if (items.names === "水质传感器") {
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/ecology/sz-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/ecology/sz-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/ecology/sz-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/ecology/sz-Offline.png')
                            }
                            this.water = item // 水质传感器
                        } else if (items.names === "负离子传感器") {
                            console.log(item, '负离子--------')
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/ecology/flz-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/ecology/flz-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/ecology/flz-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/ecology/flz-Offline.png')
                            }
                            this.anion = item // 负离子传感器
                        }
                        markerArr.push(items)
                    })
                })
                this.setMarkerToMap(markerArr)
                const _this = this
                map.on('click', function () {
                    console.log(_this.infoWindowOpen)
                    if (_this.infoWindowOpen) {
                        _this.infoWindowOpen.close()
                    }
                })
            },
            /*
            * 点位选择
            * */
            selectMarkerItem(data) {
                if (this.markerArrList.length !== 0) {
                    this.map.remove(this.markerArrList)
                }
                if (data.name === "全部点位") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        item.forEach(items => {
                            if (items.names === "雨量传感器") {
                                this.rainfall = item// 雨量传感器
                            } else if (items.names === "空气传感器") {
                                this.air = item//空气传感器
                            } else if (items.names === "土壤传感器") {
                                this.soil = item//土壤传感器 // 智能屏幕点位
                            } else if (items.names === "水质传感器") {
                                this.water = item // 水质传感器
                            } else if (items.names === "负离子传感器") {
                                this.anion = item // 负离子传感器
                            }
                            markerArr.push(items)
                        })
                    })
                    this.setMarkerToMap(markerArr)
                } else if (data.name === "雨量传感器") {
                    this.setMarkerToMap(this.rainfall)
                } else if (data.name === "空气传感器") {
                    this.setMarkerToMap(this.air)
                } else if (data.name === "土壤传感器") {
                    this.setMarkerToMap(this.soil)
                } else if (data.name === "水质传感器") {
                    this.setMarkerToMap(this.water)
                } else if (data.name === "负离子传感器") {
                    this.setMarkerToMap(this.anion)
                }
            },
            /**
             * 手动选择全部点位
             */
            setMarkerToMap(data) {
                const _this = this
                data.forEach(item => {
                    const marker = new AMap.LabelMarker({
                        position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                        icon: {
                            image: item.imgurl,
                            size: [30, 30],
                        },
                        text: {
                            content: item.name,
                            direction: 'bottom',
                            style: {
                                fontSize: 15,
                                fillColor: '#fff',
                                padding: [3, 10],
                                backgroundColor: 'rgba(0, 22, 52, 0.49)',
                            }
                        }
                    });


                    _this.map.add(marker);
                    _this.markerArrList.push(marker)
                    marker.on('click', function () {
                        if (item.names === "雨量传感器") {
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }
                            item.dayNumber = 0
                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<div class="table">' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + item.dayNumber + '</span>mm</p>' +
                                '<p>降雨量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '</div>' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                '<p>近七天数据趋势</p>' +
                                '<div id="rainfall" style="width: 100%;height:130px"></div>' +
                                '</div>' +
                                '</div>';


                            let params = {
                                deviceIds: item.deviceIds,
                                itemId: 36,
                                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                endTime: moment().format('YYYY-MM-DD'),
                                timeType: 'day'
                            }
                            rainData(params).then(res => {
                                _this.rainSevenArr = res.data;
                                _this.openWindow(item, marker, html, _this.rainSevenInit)
                            })

                        } else if (item.names === "空气传感器") {
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }
                            // 空气点位信息
                            airTime({deviceId: item.deviceId}).then(res => {
                                item.co2 = res.data.co2 ? res.data.co2 : '- '
                                item.temperature = res.data.temperature ? res.data.temperature : '- '
                                item.humidity = res.data.humidity ? res.data.humidity : '- '
                                item.pm25 = item.pm25 ? item.pm25 : '- '
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.temperature + '</span>℃</p>' +
                                    '<p>温度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.co2 + '</span>PPM</p>' +
                                    '<p>CO2</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.humidity + '</span>%</p>' +
                                    '<p>湿度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.pm25 + '</span>ug/m³</p>' +
                                    '<p>PM2.5</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + item.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                    '<p>近七天数据趋势</p>' +
                                    '<div id="airChartWindow" style="width: 100%;height:130px"></div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';

                                let params = {
                                    deviceIds: item.deviceId,
                                    itemId: 36,
                                    startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                    endTime: moment().format('YYYY-MM-DD'),
                                    timeType: 'day'
                                }
                                airSeven(params).then(res => {
                                    _this.airSevenArr = res.data;
                                    _this.openWindow(item, marker, html, _this.airChartInit)
                                })
                            })


                        } else if (item.names === "土壤传感器") {
                            console.log(item, 'turang')

                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }
                            // 土壤传感器
                            soilTime({deviceId: item.deviceId}).then(res => {
                                item.temperature = res.data.temperature ? res.data.temperature : '- '
                                item.humidity = res.data.humidity ? res.data.humidity : '- '
                                item.salinity = res.data.salinity ? res.data.salinity : '- '
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.temperature + '</span>℃</p>' +
                                    '<p>温度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.salinity + '</span>%</p>' +
                                    '<p>土壤盐分</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.humidity + '</span>%</p>' +
                                    '<p>湿度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + item.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                    '<p>近七天数据趋势</p>' +
                                    '<div id="soilChartWindow" style="width: 100%;height:130px"></div>' +
                                    '</div>' +
                                    '</div>';

                                // 近7天土壤数据
                                let params = {
                                    deviceId: item.deviceId,
                                    itemId: 36,
                                    startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                    endTime: moment().format('YYYY-MM-DD'),
                                    timeType: 'day'
                                }
                                soilSeven(params).then(res => {
                                    _this.soilSevenArr = res.data;
                                    _this.openWindow(item, marker, html, _this.soilChartInit)
                                })
                            })
                        } else if (item.names === "水质传感器") {
                            console.log(item, '水质')
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }

                            waterTime({deviceId: item.deviceId}).then(res => {
                                console.log(res.data)
                                item.ph = res.data.ph ? res.data.ph : '- '
                                item.turbidity = res.data.turbidity === null ? '- ' : res.data.turbidity
                                item.temperature = res.data.temperature === null ? '- ' : res.data.temperature
                                item.dissolution = res.data.dissolution === null ? '- ' : res.data.dissolution

                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.ph + '</span></p>' +
                                    '<p>PH值</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.turbidity + '</span>ntu</p>' +
                                    '<p>浊度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span% style="font-family:PMZD" >' + item.temperature + '</span>%</p>' +
                                    '<p>湿度</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.dissolution + '</span>mg/l</p>' +
                                    '<p>溶解氧</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + item.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                    '<p>近七天数据趋势</p>' +
                                    '<div id="waterSevenWindow" style="width: 100%;height:130px"></div>' +
                                    '</div>' +
                                    '</div>';
                                let params = {
                                    deviceIds: item.deviceId,
                                    itemId: 36,
                                    startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                    endTime: moment().format('YYYY-MM-DD'),
                                    timeType: 'day'
                                }
                                waterSeven(params).then(res => {
                                    _this.waterSevenArr = res.data;
                                    _this.openWindow(item, marker, html, _this.waterSevenInit)
                                })


                            })
                        } else if (item.names === "负离子传感器") {


                            item.states = item.states === "0" ? '在线' : '离线'
                            item.online = item.states === "0" ? '#1FFE9A' : '#FFFFFF'
                            anionTime({deviceId: item.deviceId}).then(res => {
                                item.tvoc = res.data.tvoc
                            })
                            let params = {
                                deviceId: item.deviceId,
                                itemId: 36,
                                startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                endTime: moment().format('YYYY-MM-DD'),
                                timeType: 'day'
                            }
                            airSeven(params).then(res => {
                                _this.anionSevenArr = res.data;
                                item.tvoc = res.data.tvoc ? res.data.tvoc : '- '
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.tvoc + '</span>cm3</p>' +
                                    '<p>负氧离子</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + item.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.states + '</span> </p>' +
                                    '<p>近七天数据趋势</p>' +
                                    '<div id="anionChartWindow" style="width: 100%;height:130px"></div>' +
                                    '</div>' +
                                    '</div>';
                                _this.openWindow(item, marker, html, _this.anionChartInit)
                            })
                        }
                    })
                })
            },
            /*
            * 雨量
            * */
            rainSevenInit() {
                const myChart = this.$echarts.init(document.getElementById('rainfall'));
                const dates = [];
                const nums = [];

                console.log(this.rainSevenArr, '图表数据')

                for (var i = 0; i < this.rainSevenArr.length; i++) {
                    dates.push(this.rainSevenArr[i].selectTime.substring(5, 10));
                    // nums.push(this.rainSevenArr[i].number24Total);
                    let val = this.rainSevenArr[i].number24Total;
                    if (val >= 0 && val < 1) {
                        nums.push(0);
                    } else if (val >= 1 && val < 10) {
                        nums.push(1);
                    } else if (val >= 10 && val < 25) {
                        nums.push(2);
                    } else if (val >= 25 && val < 50) {
                        nums.push(3);
                    } else if (val >= 50 && val < 100) {
                        nums.push(4);
                    } else if (val >= 100 && val < 200) {
                        nums.push(5);
                    } else if (val >= 200) {
                        nums.push(6);
                    }
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = ''
                            let text = '';
                            if (params[0].value == 0) {
                                text = '晴';
                            } else if (params[0].value == 1) {
                                text = '小雨';
                            } else if (params[0].value == 2) {
                                text = '中雨';
                            } else if (params[0].value == 3) {
                                text = '大雨';
                            } else if (params[0].value == 4) {
                                text = '暴雨';
                            } else if (params[0].value == 5) {
                                text = '大暴雨';
                            } else if (params[0].value == 6) {
                                text = '特大暴雨';
                            }
                            let time = params[0].name;
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                            }
                            return time + '<br>' + str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 0,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 38,
                        left: 50,
                        right: 6,
                        bottom: '14%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            interval: 0,
                        }
                    },
                    yAxis: {
                        name: '(等级)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: function (value) {
                                var texts = [];
                                if (value == 0) {
                                    texts.push('晴');
                                } else if (value == 1) {
                                    texts.push('小雨');
                                } else if (value == 2) {
                                    texts.push('中雨');
                                } else if (value == 3) {
                                    texts.push('大雨');
                                } else if (value == 4) {
                                    texts.push('暴雨');
                                } else if (value == 5) {
                                    texts.push('大暴雨');
                                } else if (value == 6) {
                                    texts.push('特大暴雨');
                                }
                                // if (value > 0 && value < 10) {
                                //     texts.push('小雨');
                                // } else if (value >= 10 && value < 25) {
                                //     texts.push('中雨');
                                // } else if (value >= 25 && value < 50) {
                                //     texts.push('大雨');
                                // } else if (value >= 50 && value < 100) {
                                //     texts.push('暴雨');
                                // }  else if (value >= 100 && value < 200) {
                                //     texts.push('大暴雨');
                                // }  else if (value >= 200) {
                                //     texts.push('特大暴雨');
                                // }
                                return texts;
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        // splitNumber: 5,
                        max: 6
                    },
                    series: [{
                        // name: '环境指数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#EEFD7B',
                            width: 3
                        },
                        itemStyle: {
                            color: '#EEFD7B',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(238, 253, 123, 0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(238, 253, 123, 0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            /*
            * 空气传感器
            * */
            airChartInit() {
                const myChart = this.$echarts.init(document.getElementById('airChartWindow'));
                // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
                // const nums = [0,2,3,4,4,2,5];
                let dates = [];
                let nums = [];
                for (var i = 0; i < this.airSevenArr.length; i++) {
                    dates.push(this.airSevenArr[i].selectTime.substring(5, 10));
                    // nums.push(this.airSevenArr[i].pm25Avg);
                    let val = this.airSevenArr[i].pm25Avg;
                    if (val >= 0 && val < 35) {
                        nums.push(5);
                    } else if (val >= 35 && val < 75) {
                        nums.push(4);
                    } else if (val >= 75 && val < 115) {
                        nums.push(3);
                    } else if (val >= 115 && val < 150) {
                        nums.push(2);
                    } else if (val >= 150 && val < 250) {
                        nums.push(1);
                    } else {
                        nums.push(0);
                    }
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = '';
                            let text = '';
                            if (params[0].value == 0) {
                                text = '严重污染';
                            } else if (params[0].value == 1) {
                                text = '重度污染';
                            } else if (params[0].value == 2) {
                                text = '中度污染';
                            } else if (params[0].value == 3) {
                                text = '轻度污染';
                            } else if (params[0].value == 4) {
                                text = '良';
                            } else if (params[0].value == 5) {
                                text = '优';
                            }
                            let time = params[0].name;
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                            }
                            return time + '<br>' + str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 0,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 38,
                        left: 56,
                        right: 6,
                        bottom: '14%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            interval: 0,
                        }
                    },
                    yAxis: {
                        name: '(等级)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: function (value) {
                                var texts = [];
                                if (value == 0) {
                                    texts.push('严重污染');
                                } else if (value == 1) {
                                    texts.push('重度污染');
                                } else if (value == 2) {
                                    texts.push('中度污染');
                                } else if (value == 3) {
                                    texts.push('轻度污染');
                                } else if (value == 4) {
                                    texts.push('良');
                                } else if (value == 5) {
                                    texts.push('优');
                                }
                                return texts;
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        // splitNumber: 4,
                        // minInterval: 1,
                        max: 5
                    },
                    series: [{
                        name: '环境指数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#1FFE9A',
                            width: 3
                        },
                        itemStyle: {
                            color: '#1FFE9A',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(31,254,154,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(31,254,154,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            /*
            * 土壤
            * */
            soilChartInit() {
                const myChart = this.$echarts.init(document.getElementById('soilChartWindow'));
                // const dates = ['05:06','05:07','05:08','05:09','05:10','05:11','05:12'];
                // const nums = [0,0.6,1,1.4,2,2.2,4];
                let dates = [];
                let nums = [];
                for (var i = 0; i < this.soilSevenArr.length; i++) {
                    dates.push(this.soilSevenArr[i].selectTime.substring(5, 10));
                    // nums.push(this.soilSevenArr[i].conductivityAvg / 1000);
                    let val = this.soilSevenArr[i].conductivityAvg / 1000;
                    if (val >= 0 && val < 0.8) {
                        nums.push(0);
                    } else if (val >= 0.8 && val < 1.2) {
                        nums.push(1);
                    } else if (val >= 1.2 && val < 1.6) {
                        nums.push(2);
                    } else if (val >= 1.6 && val < 3.2) {
                        nums.push(3);
                    } else {
                        nums.push(4);
                    }
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = '';
                            let text = '';
                            if (params[0].value == 0) {
                                text = '非盐渍化';
                            } else if (params[0].value == 1) {
                                text = '盐渍化';
                            } else if (params[0].value == 2) {
                                text = '中度盐土';
                            } else if (params[0].value == 3) {
                                text = '重度盐土';
                            } else if (params[0].value == 4) {
                                text = '极重盐土';
                            }
                            let time = params[0].name;
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                            }
                            return time + '<br>' + str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 0,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 38,
                        left: 56,
                        right: 6,
                        bottom: '14%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            interval: 0,
                        }
                    },
                    yAxis: {
                        name: '(等级)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: function (value) {
                                var texts = [];
                                if (value == 0) {
                                    texts.push('非盐渍化');
                                } else if (value == 1) {
                                    texts.push('盐渍化');
                                } else if (value == 2) {
                                    texts.push('中度盐土');
                                } else if (value == 3) {
                                    texts.push('重度盐土');
                                } else if (value == 4) {
                                    texts.push('极重盐土');
                                }
                                return texts;
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        // splitNumber: 4,
                        // minInterval: 1,
                        max: 4
                    },
                    series: [{
                        name: '环境指数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#32E9FF',
                            width: 3
                        },
                        itemStyle: {
                            color: '#32E9FF',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            /*
            * 水质
            * */
            waterSevenInit() {
                const myChart = this.$echarts.init(document.getElementById('waterSevenWindow'));
                const dates = [];
                const nums = [];
                for (var i = 0; i < this.waterSevenArr.length; i++) {
                    dates.push(this.waterSevenArr[i].selectTime.substring(5, 10));
                    // nums.push(this.waterSevenArr[i].dissolutionAvg);
                    let val = this.waterSevenArr[i].dissolutionAvg;
                    if (val >= 0 && val < 2) {
                        nums.push(0);
                    } else if (val >= 2 && val < 3) {
                        nums.push(1);
                    } else if (val >= 3 && val < 5) {
                        nums.push(2);
                    } else if (val >= 5 && val < 6) {
                        nums.push(3);
                    } else if (val >= 6) {
                        nums.push(4);
                    }
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = '';
                            let text = '';
                            if (params[0].value == 0) {
                                text = 'V类';
                            } else if (params[0].value == 1) {
                                text = 'IV类';
                            } else if (params[0].value == 2) {
                                text = 'III类';
                            } else if (params[0].value == 3) {
                                text = 'II类';
                            } else if (params[0].value == 4) {
                                text = 'I类';
                            }
                            let time = params[0].name;
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + text + '<br>'
                            }
                            return time + '<br>' + str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 0,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 38,
                        left: 46,
                        right: 6,
                        bottom: '14%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            interval: 0,
                        }
                    },
                    yAxis: {
                        name: '(等级)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: function (value) {
                                var texts = [];
                                if (value == 0) {
                                    texts.push('V类');
                                } else if (value == 1) {
                                    texts.push('IV类');
                                } else if (value == 2) {
                                    texts.push('III类');
                                } else if (value == 3) {
                                    texts.push('II类');
                                } else if (value == 4) {
                                    texts.push('I类');
                                }
                                // if (value >= 0 && value < 2) {
                                //     texts.push('V类');
                                // } else if (value >= 2 && value < 3) {
                                //     texts.push('IV类');
                                // } else if (value >= 3 && value < 5) {
                                //     texts.push('III类');
                                // } else if (value >= 5 && value < 6) {
                                //     texts.push('II类');
                                // } else {
                                //     texts.push('I类');
                                // }
                                return texts;
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        // splitNumber: 4,
                        // minInterval: 1,
                        max: 4
                    },
                    series: [{
                        name: '环境指数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#FFAD95',
                            width: 3
                        },
                        itemStyle: {
                            color: '#FFAD95',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255,173,149,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(255,173,149,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            /*
            * 负离子
            * */
            anionChartInit() {
                const myChart = this.$echarts.init(document.getElementById('anionChartWindow'));
                const dates = [];
                const nums = [];
                for (var i = 0; i < this.anionSevenArr.length; i++) {
                    dates.push(this.anionSevenArr[i].selectTime.substring(5, 10));
                    nums.push(this.anionSevenArr[i].tvocAvg);
                }
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = ''
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                            }
                            return str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        icon: 'roundRect',
                        itemWidth: 5,
                        itemHeight: 5,
                        top: 6,
                        right: 0,
                        textStyle: {
                            color: '#B2CEEC',
                            fontSize: 10
                        }
                    },
                    grid: {
                        top: 38,
                        left: 46,
                        right: 6,
                        bottom: '14%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                        }
                    },
                    yAxis: {
                        name: '(等级)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: function (value) {
                                var texts = [];
                                if (value >= 0 && value < 400) {
                                    texts.push('绿地级');
                                } else if (value >= 400 && value < 1000) {
                                    texts.push('公园级');
                                } else if (value >= 1000 && value < 5000) {
                                    texts.push('郊野级');
                                } else if (value >= 5000 && value < 10000) {
                                    texts.push('高山级');
                                } else {
                                    texts.push('森林级');
                                }
                                return texts;
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitNumber: 4,
                        minInterval: 1,
                    },
                    series: [{
                        name: '环境指数',
                        type: 'line',
                        data: nums,
                        lineStyle: {
                            color: '#FD7BB8',
                            width: 3
                        },
                        itemStyle: {
                            color: '#FD7BB8',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(253,123,184,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(253,123,184,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            /*
            * 打开弹窗事件
            * */
            openWindow(item, marker, html, callback) {
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: html, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(-10, -30),
                    anchor: "top-left"
                });
                infoWindow.open(this.map, marker.getPosition());
                this.infoWindowOpen = infoWindow
                window.clearWindowInfo = function () {
                    infoWindow.close()
                }
                if (callback) {
                    callback()
                }
            },
        },
        beforeDestroy() {
            if (this.markerArrList !== null) {
                this.map.remove(this.markerArrList)
            }
            if (this.infoWindowOpen !== null) {
                this.infoWindowOpen.close()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>